import React from 'react'
import '../../assets/css/profile/bind.less'
import connect from "react-redux/es/connect/connect";
import {Toast} from "antd-mobile";
class BindComponent extends React.Component {
    constructor(props){
        super(props)
        this.state={
            uid:props.state.userInfo.uid,
            phone:'',
            code:''
        }
    }

    goBack(){
        this.props.history.goBack()
    }
    setPhone(){
        const parmas = new URLSearchParams()
        parmas.append('uid',this.state.uid)
        parmas.append('cellphone',this.state.phone)
        fetch('http://vueshop.glbuys.com/api/user/myinfo/updatecellphone?token=1ec949a15fb7',{
            method:'POST',
            body:parmas
        }).then((res)=>res.json())
            .then((res)=>{
                console.log(res);
                if(res.code===200){
                    Toast.success('绑定成功', 1);
                }
            })
    }
    bindPhone(){
        if(this.state.phone===''){
            Toast.info('请输入手机号', 1, null, false);
            return
        }
        if(!(/^1[3456789]\d{9}$/.test(this.state.phone))){
            Toast.info('您输入的手机号格式不正确', 1,null,false);
            return ;
        }
        if(this.state.code===''){
            Toast.info('请输入验证码', 1,null,false);
            return ;
        }
        this.setPhone()
    }
    render() {
        return(
            <div id='bind'>
                <div className='header'>
                    <div onClick={this.goBack.bind(this)}>
                        <img src="/images/user/my/返回.png" alt=""/>
                    </div>
                    <div>修改密码</div>
                    <div></div>
                </div>
                <div className='tit'>
                    <img src="/images/user/mobile/tip.png" alt=""/>
                    <div>新手机号验证后，即可绑定成功!</div>
                </div>
                <div>

                    <div className='pwdBtn'>
                        <input type="text" placeholder='绑定手机号'
                               onChange={(e)=>{
                                   this.setState({
                                       phone:e.target.value
                                   })
                               }}
                        />
                    </div>
                    <div className='pwdBtn'>
                        <input type="text" placeholder='请输入短信验证码'
                               onChange={(e)=>{
                                   this.setState({
                                       code:e.target.value
                                   })
                               }}
                        />
                    </div>
                    <div className='submit' onClick={this.bindPhone.bind(this)}>下一步</div>
                </div>

            </div>
        )
    }
}
export default  connect((state)=>{
    return{
        state
    }
})(BindComponent)